<template>
  <div class="page_box">
    <ehl-form
      ref="form1"
      :options="search.tree"
      :data="search.data"
      customClass="page_left cpt_round_card"
    >
      <template v-slot:tree1>
        <div class="add_group cpt_btn_ico iconquanbu" @click="addGroup">添加分组</div>
      </template>
      <template v-slot:tree_leaf="{ data }">
        <div class="tree_node_box">
          <div class="tree_node_left">
            <span
              :style="{ 'margin-right': '10px' }"
              class="cpt_btn_ico iconquanbu"
            ></span>
            <span>{{ data.data.label }}</span>
          </div>
          <div class="tree_node_right">
            <span
              :style="{ 'margin-right': '10px' }"
              class="cpt_btn_ico iconquanbu"
              title="删除"
              @click="delGroup(data.data)"
            ></span>
            <span
              :style="{ 'margin-right': '10px' }"
              class="cpt_btn_ico iconquanbu"
              title="更改"
              @click="changeGroup(data.data)"
            ></span>
          </div>
        </div>
      </template>
    </ehl-form>
    <div class="page_right">
      <ehl-form
        ref="form2"
        :options="search.search"
        :data="search.data"
        :labelWidth="search.labelWidth"
        :horizon="search.horizon"
        customClass="search cpt_round_card"
      >
        <template v-slot:btn="{ data }">
          <div class="cpt_btn_blue searchBtn" @click="() => serachClick(data)">搜索</div>
          <div class="cpt_btn_white searchBtn" @click="() => resetClick(data)">重置</div>
          <div class="cpt_btn_white addBtn" @click="() => addClick(data)">新建</div>
        </template>
      </ehl-form>
      <ehl-form
        ref="form3"
        :options="search.table"
        :data="search.data"
        customClass="table"
      >
        <template v-slot:table="{ data }">
          <span
            class="table_delete cpt_btn_ico iconquanbu"
            title="编辑"
            @click="() => delClick(data)"
          ></span>
          <span
            class="table_delete cpt_btn_ico iconquanbu"
            title="删除"
            @click="() => delClick(data)"
          ></span>
        </template>
      </ehl-form>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import search from '@/common/demo/index.js'
  import ehlForm from '@/common'
  import { Component } from 'vue-property-decorator'

  @Component({
    components: { ehlForm },
    beforeRouteEnter(to, from, next) {
      $setStore('waiting', false)
      next()
    },
  })
  export default class searchView extends Vue {
    configTree = null
    configSearch = null
    configTable = null
    search = new search({
      tree: [],
      input: '',
      table: [],
    })
    mounted() {
      this.configTree = this.$refs.form1.getOptions()
      this.configSearch = this.$refs.form2.getOptions()
      this.configTable = this.$refs.form3.getOptions()
      this.serachClick()
    }
    getList(other) {
      let param = Object.assign(
        {
          page: this.configTable.table.page,
          size: this.configTable.table.size,
          input: this.search.data.input,
          tree: this.search.data.tree,
        },
        other || {},
      )
      setTimeout(() => {
        this.search.data.table = [
          { datasetName: 1212 },
          { datasetName: 1212 },
          { datasetName: 1212 },
          { datasetName: 1212 },
          { datasetName: 1212 },
        ]
        this.$nextTick(() => {
          this.configTree.tree.style.height =
            document.querySelector('.search').offsetHeight +
            document.querySelector('.table').offsetHeight -
            20 +
            'px'
        })
      }, 1000)
    }
    serachClick(data) {
      this.configTable.table.page = 1
      this.getList()
    }
    resetClick(data) {
      this.search.data.input = ''
      this.configTable.table.page = 1
      this.configTable.table.size = 10
      this.getList()
    }
    addClick(data) {}
    async delClick(data) {
      try {
        await this.$confirm('确定删除吗?', '提示', {
          showClose: false,
        })
        ajax
          .delete(``)
          .then(res => {
            $message.success('删除成功')
            this.getList()
          })
          .catch(error => {
            $message.error(error)
          })
      } catch (error) {
        console.log(error)
      }
    }
    addGroup() {}
    delGroup(data) {}
    changeGroup(data) {}
  }
</script>
<style lang="less" scoped>
  .page_box {
    display: flex;
    width: 100%;
    min-height: 600px;

    .page_left {
      flex-shrink: 0;
      width: 260px;
      margin-right: 20px;

      .add_group {
        width: 100%;
        padding: 0 10px;
        color: red;
        cursor: pointer;

        &::before {
          margin-right: 10px;
        }
      }

      .tree_node_box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tree_node_left {
          cursor: pointer;
        }

        .tree_node_right {
          color: @cpt_red;
          cursor: pointer;
        }
      }
    }

    .page_right {
      flex-grow: 1;
      width: 1px;

      .search {
        margin-bottom: 20px;

        .searchBtn {
          width: 80px;
          margin-right: 10px;
        }

        .addBtn {
          position: absolute;
          right: 0;
          width: 80px;
        }
      }

      .table_delete {
        margin-right: 10px;
        color: @cpt_main;
        cursor: pointer;
      }
    }
  }
</style>
